<template>
    <div id="container">
        <div id="header_login">
            <strong style="font-size:30px">欢迎 <span style="font-size:35px;color:#409EFF">登录</span> ！!</strong><br><br><br>
            没有账号？
            <el-button type="text" @click="() => $router.push('/register')">去注册</el-button>
        </div>
        <el-form label-width="80px" :model="LOGIN" :rules="rules" style="width:400px" ref="login_ref">
            <el-form-item label="账号" prop="account">
                <el-input placeholder="请输入账号" suffix-icon="el-icon-user" v-model="LOGIN.account" clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入密码" suffix-icon="el-icon-lock" v-model="LOGIN.password" clearable show-password>
                </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="validate_code">
                <el-popover ref="popover" placement="right" trigger="focus">
                    <el-image style="width:80px;height:50px;text-align: center;" :src="validate_code_url" fit="fit"
                        @click="get_validate_code"></el-image>
                    <!-- <img style="width:80px;height:50px" :src="validate_code_url" fit="fit" @click="get_validate_code" /> -->

                </el-popover>
                <el-input v-popover:popover placeholder="请输入验证码" suffix-icon="el-icon-picture-outline-round"
                    v-model="LOGIN.validate_code" clearable @focus="get_validate_code">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="login()" class="login-btn" :loading="loading">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { rules, comfirm_password_validator } from '@/utils/rules.js'
export default {

    data() {
        return {
            // 表单项
            LOGIN: {
                account: '',
                password: '',
                validate_code: '',
            },

            validate_code_visible: false,
            validate_code_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            validate_get_btn: '获取',

            // 验证规则
            rules: null,
            loading: false
        }
    },

    mounted() {
        this.get_validate_code()
    },
    created() {
        this.rules = rules

    },
    methods: {
        login() {
            this.loading = true
            this.$refs.login_ref.validate(async v_res => {
                if (!v_res) return
                else {
                    try {
                        const res = await this.$http.post("user/login", {
                            account: this.LOGIN.account,
                            password: this.$md5(this.LOGIN.password),
                            validateCode: this.LOGIN.validate_code,
                            validateKey: localStorage.validate_key,
                        });
                        //.log(res)
                        if (res.data.code === 2000) {
                            switch (res.data.data.flag) {
                                case 1:
                                    this.$message.success('成功')
                                    sessionStorage.user_id = res.headers.id; // 存储用户id
                                    sessionStorage.token = res.headers.token; // 存储token
                                    sessionStorage.type = res.data.data.type
                                    sessionStorage.account = res.data.data.account
                                    sessionStorage.username = res.data.data.name
                                    //.log(res)
                                    if (res.data.data.type === 1) {
                                        this.$router.push('/admin')
                                    } else
                                        this.$router.push('/user')

                                    // 启动后台数据监测
                                    await this.$http.get("/start");

                                    break;
                                case 0:
                                    this.$message.error('验证码错误')
                                    break;
                                case 2:
                                    this.$message.error('密码错误')
                                    break;
                                case 3:
                                    this.$message.error('用户名不存在')
                                    break;
                                default:
                                    break;
                            }

                        }
                    } catch (error) {
                        // //.log(error);
                    }
                }
                this.loading = false
            })
        },
        get_validate_code() {
            // 请求验证码
            let that = this;
            this.$http.get('/kaptcha')
                .then(res => {
                    // 更新验证码链接
                    that.validate_code_url = res.data.data.captcha;
                    // 存储validateKey
                    localStorage.validate_key = res.headers.validatekey;
                }).catch(error => {
                    that.$message.error('获取验证码出错！');
                    // //.log(error)
                })
        },
    }
}
</script>

<style lang="less" scoped>
#container {
    padding: 1vi;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    .el-form {
        margin-top: 1vi;
        margin-left: 1vi;

        .el-button {
            width: 50%;
        }

        .validate_img {
            width: 50px;
            height: 80px;
        }
    }
}
</style>